<script setup>
import empty from '../../assets/img/empty.png'
import { reactive,ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useStore } from 'vuex';
import EmptyData from '../../components/emptyData.vue';
const store = useStore()
const api = store.state.api
const common = store.state.common.obj
// 获取本地图片
const getAssetsImages = (name) => {
    return new URL(`../../assets/img/list/user/${name}`,
        import.meta.url).href;
}

const awardListTop = [
    [
        {
            pic: getAssetsImages(''),
            name: '冠军专属<br>定制动态勋章'
        },
        {
            pic: getAssetsImages('majia.png'),
            name: '官方红马甲<br>*30天'
        },

      {
        pic: getAssetsImages('diantang.png'),
        name: '荣耀殿堂<br>页面展示'
      }
    ],
    [
        {
          pic: getAssetsImages(''),
          name: '2024春季联赛<br>亚军神壕动态勋章'
        },
        {
          pic: getAssetsImages('majia.png'),
          name: '官方红马甲<br>*20天'
        },
        {
          pic: getAssetsImages('diantang.png'),
          name: '荣耀殿堂<br>页面展示'
        }
    ],
    [
      {
        pic: getAssetsImages(''),
        name: '2024春季联赛<br>季军神壕动态勋章'
      },
      {
        pic: getAssetsImages('majia.png'),
        name: '官方红马甲<br>*10天'
      },
      {
        pic: getAssetsImages('diantang.png'),
        name: '荣耀殿堂<br>页面展示'
      }
    ],
]
let baoshijList=[60,36,36,24,24,12,12];
for(let i=0;i<7;i++){
  awardListTop.push(
      [
        {
          pic: getAssetsImages(''),
          name: '2024春季联赛<br>TOP10神壕勋章'
        },

        {
          pic: getAssetsImages('diantang.png'),
          name: '荣耀殿堂<br>页面展示'
        }
      ]
  );
}

// 神壕榜
let userRank = reactive({
    result: []
})
for (let i = 0; i < 10; i++) {
    userRank.result.push({ rank: i + 1, userNickName: "虚位以待", userId: -1 })
}
const getUserRank = async () => {
    await api.userRank().then(res => {
         console.log(userRank.result);

        if (res.data.result) {
            let data = res.data.result
            data.forEach((item, i) => {
                let index = userRank.result.findIndex(function (t) { return t.rank == item.rank })
                if (index >= 0) userRank.result[i] = item
            });
        }
    })
}
const rank = computed(() => {
    return userRank.result
})
let timer
onMounted(() => {
    getUserRank()
    getUserInfo()
    timer = setInterval(() => {
        getUserRank()
        getUserInfo()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
// 最佳神豪个人信息
let userInfo = reactive({
    result: {}
})
const getUserInfo = async () => {
    await api.userInfo({ userId: common.userId }).then(res => {
         /*res = {
             data: {
                 "errcode": 0,
                 "result": {
                     "rank": 1,
                     "scores": 29998,
                     "timeStamp": 1677054352590,
                     "userId": 123456789,
                     "userNickName": "科技所大",
                     "userPic": ""
                 },
                 "errmsg": "",
                 "status": 200
             }
         }*/
        if (res.data.result) {
            userInfo.result = res.data.result
        }
    })
}
const info = computed(() => {
    return userInfo.result
})
let rewardPanelCls=ref('none');
let closeRewardClick=(e)=>{
  rewardPanelCls.value='none';
}

let interceptCharacter=function(str,len){
  if(str==null)str="";
  //trace("CarUtil interceptCharacter",str);
  let i=0;
  let _end=0;
  let _len=0;
  for (i = 0; i < str.length; i++)
  {

    if(str.charCodeAt(i)>10000){
      _len+=2;
    }else{
      _len+=1;
    }
    if(_len<=len){
      _end++;
    }

  }
  if(_end<1)_end=1;
  let _str="";
  for (i = 0; i < _end; i++)
  {
    _str+=str.charAt(i);
  }
  if(_str.length<str.length)_str=_str+"...";
  return _str;
}
</script>

<template>
    <div>
        <div class="userList">
            <div class="userTop" :class="'userTop' + index" v-for="(item, index) in rank" :key="index">
              <div class="infoBox">
                    <div class="headImg">
                        <img :src="item.userPic || empty" alt="">
                    </div>
                    <!--<p class="info"><span class="name">{{ item.userNickName || '酷炫牛人' }}</span>
                      <span v-if="item.userId != -1" class="name">ID：{{ item.userId }}</span></p>
                    <p class="infoScore" v-if="item.userId != -1"><span>总联赛值</span><span>{{ item.scores }}</span></p>-->
                  <div class="infodiv">
                    <div class="info">
                      <p class="uname">{{ interceptCharacter(item.userNickName,12) || '酷炫牛人' }}</p>
                      <p v-if="item.userId != -1" class="uid" >ID:{{ item.userId }}</p>
                    </div>
                    <div v-if="item.userId != -1" class="infoScore" >
                      总联赛值：{{ item.scores }}
                    </div>
                  </div>

              </div>
              <div class="rankN" v-if="index>2">第{{index+1}}名</div>
                <!--<div class="awardBox">
                    <div class="award" :class="'award' + index1" v-for="(item1, index1) in awardListTop[index]"
                        :key="index1">
                        <div><img :src="item1.pic" alt=""></div>
                        <p v-html="item1.name"></p>
                    </div>
                </div>-->
              <div class="awardBoxu">
                <div class="award" :class="'award' + index1" v-for="(item1, index1) in awardListTop[index]" :key="index1">
                  <div class="imgcls"><img :src="item1.pic" alt=""></div>
                  <div class="txt" v-html="item1.name"></div>
                </div>
              </div>
            </div>
            <div class="myScore_box">
                <div class="title" ></div>
                <div class="myScore">

                    <template v-if="info.userId">
                        <p  class="pn">第{{ info.rank }}名</p>
                      <p class="pid"><span>ID:</span> <span style=" font-weight: 600;">{{ info.userId }}</span></p>
                      <p class="pnn"><span>昵称:</span><span style=" font-weight: 600;">{{ interceptCharacter(info.userNickName,12) || '酷炫牛人' }}</span></p>

                        <p class="ps"><span>总联赛值:</span><span style=" font-weight: 600;">{{ info.scores }}</span></p>
                    </template>
                    <EmptyData v-else />
                </div>
            </div>
            <div class="userReward" :style="{display:rewardPanelCls}">
              <div class="content">
                <div class="rewarddiv">
                  <img class="reimg">
                  <div class="txt">保时捷*2</div>
                </div>
                <div class="okBtn"></div>
                <div class="sm">
                  2024春季联赛联赛神壕奖励<br>将分为12月发放，请每月及时领取
                </div>
                <div class="close" @click="closeRewardClick($event)"></div>
              </div>
            </div>
        </div>
        <div class="userTip">注：神壕奖励将在活动结束后自动发放</div>
    </div>
</template>

<style lang='scss' scoped></style>
